<template>
    <ContentField>
        <div class="container" :class="{loadingItem: isProductLoading}">
            <div class="row text-center" v-if="isProductLoading">
                <grid-loader :loading="isProductLoading" :color="loaderColor" :size="loaderSize"></grid-loader>
            </div>
            <div v-else class="row action-panel">
                <div class="col-12">
                    <div class="btn-group btn-group-sm pull-right">
                                <button id="list" class="btn btn-outline-dark" @click.prevent="changeDisplay(true)">
                        <i class="fa fa-list" aria-hidden="true"></i> List
                                </button>
                                <button id="grid" class="btn btn-outline-dark" @click.prevent="changeDisplay(false)">
                        <i class="fa fa-th" aria-hidden="true"></i> Grid
                                </button>
                    </div>
                </div>
            </div>
            <div class="row" v-if="!isProductLoading">
                <GoodsItem v-for="goods in goodsList" :item="goods" :key="goods.id" :displayList="displayList"></GoodsItem>
            </div>
        </div>
        <nav aria-label="..." style="float: right">
            <ul class="pagination">
                <li class="page-item" @click.prevent="click_page(-1)">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" @click.prevent="click_page(+1)">Next</a>
                </li>
            </ul>
        </nav>
    </ContentField>
    
    <!-- <div id="root"> -->
        <!-- <div class="rax-view pc-home-contanier">
            <img class="pc-home-bg" src="../assets/images/home-background.jpg">
            <div class="pc-homepage-header">
                <div class="rax-view logo">
                    <a class="header-logo-area" href="http://127.0.0.1:8081/eshop/login">
                        
                    </a>
                </div>
            </div>
            
                <ContentField v-for="good in goods" :key="good.id">
                    <div class="col-3">
                        <a href="">
                            <img class="pc-img" src="https://ts1.cn.mm.bing.net/th?id=OIP-C.bj4bXnzhQFY2euPlr2TpFQHaLH&w=135&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2">
                            <div class="goods-name">{{ good.name }}</div>
                            <span class="goods-price">￥</span>
                            <span class="goods-price">{{ good.price }}</span>  
                        </a>
                    </div>
                </ContentField>
            
            <ContentField>
                <div class="row">
                    <div class="col-3">
                        <a class="link" href="">
                            <img class="pc-img" src="https://ts1.cn.mm.bing.net/th?id=OIP-C.bj4bXnzhQFY2euPlr2TpFQHaLH&w=135&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2">
                            <div class="goods-name">name1</div>
                            <span class="goods-price">￥</span>
                            <span class="goods-price">price1</span>  
                        </a>
                    </div>
                    <div class="col-3">
                        <a class="link" href="">
                            <img class="pc-img" src="https://gw.alicdn.com/bao/uploaded/i4/2095007497/O1CN01RwM62525FfnmHk5bW_!!2095007497.jpg_220x10000Q75.jpg_.webp">
                            <div class="goods-name">name1</div>
                            <span class="goods-price">￥</span>
                            <span class="goods-price">price1</span>   
                        </a>
                    </div>
                    <div class="col-3">
                        <a class="link" href="">
                            <img class="pc-img" src="https://gw.alicdn.com/bao/uploaded/i1/2211100275674/O1CN013If8Rv1rmk25eNPBF_!!0-item_pic.jpg_220x10000Q75.jpg_.webp">
                            <div class="goods-name">name1</div>
                            <span class="goods-price">￥</span>
                            <span class="goods-price">price1</span>  
                        </a>
                    </div>
                    <div class="col-3">
                        <a class="link" href="">
                            <img class="pc-img" src="https://gw.alicdn.com/bao/uploaded/i4/1710306994/TB2G6x9nlDH8KJjSszcXXbDTFXa_!!1710306994.jpg_220x10000Q75.jpg_.webp">
                            <div class="goods-name">name1</div>
                            <span class="goods-price">￥</span>
                            <span class="goods-price">price1</span>  
                        </a>
                    </div>
                </div>
            </ContentField>
        </div> -->
    <!-- </div> -->
</template>



<script>
import ContentField from '@/components/ContentField.vue'
import { useStore } from 'vuex'
import { ref } from 'vue'
import { computed } from '@vue/runtime-core'
import GoodsItem from '../components/GoodsItem.vue'
import GridLoader from 'vue-spinner/src/GridLoader.vue'

export default {
    name: 'HomeView',
    components: {
        ContentField,
        GoodsItem,
        GridLoader
    },
    setup() {
        const store = useStore()
        let nowPage = ref(1)
        let pageSize = ref(2)
        let displayList = ref(false)
        let isProductLoading = computed(() => {return store.state.goods.isProductLoading;})
        let goodsList = computed(() => {return store.getters.goodsList;})

        store.dispatch('sendPage', {currentPage: nowPage.value, pageSize: pageSize.value})

        const search = () => {
            store.dispatch("login", {
                success() {
                    
                },
            })
        }

        const click_page = (add) => {
            if (nowPage.value + add <= 0) return;
            if (nowPage.value + add > 10) return;
            nowPage.value += add;
            store.dispatch('sendPage', {currentPage: nowPage.value, pageSize: pageSize.value})
        }

        const changeDisplay = (isList) => {
            displayList.value = isList
        }

        return {
            loaderColor: "#5cb85c",
            loaderSize: "50px",
            isProductLoading,
            goodsList,
            displayList,
            changeDisplay,
            search,
            nowPage,
            pageSize,
            click_page
        }
    }
}
</script>



<style scoped>
.loadingItem {
  align-items: center;
  justify-content: center;
  display: flex;
}

.action-panel {
  margin-bottom: 10px;
  margin-right: 5px;
}
/* * {
    margin: 0;
    padding: 0;
    border: 0;
}
.pc-home-container   {
    width: 1190px;
    margin: 0 auto;
}
.rax-view {
    box-sizing: border-box;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-shrink: 0;
    align-content: flex-start;
    border: 0 solid #000;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.pc-home-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.pc-home-bg {
    z-index: -1;
}
.pc-homepage-header, .header-logo-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.pc-homepage-header {
    height: 112px;
    padding: 0 12px;
}
.logo {
    width: 30%;
}
.pc-hompagee-header .header-logo-area {
    text-decoration: none;
    display: flex;
    width: 196px;
    height: 92px;
}
.pc-homepage-header .header-logo-area .header-logo {
    width: 107px;
    height: 67px;
}
.pc-img {
    width: 70%;
    height: 70%;
}
.goods-name {
    font-weight: bold;
    font-size: 1.5rem;
    color: black;
}
.goods-price {
    color: #FF5000;
}
.link {
    text-decoration: none;
} */
</style>

